<template>
  <el-dialog v-model="state.visible" v-if="isShow"  :show-close="false" :append-to-body="true" :before-close="beforeClose" :destroy-on-close="true">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">路由添加</h4>
        <el-button type="danger" @click="onDialogClose(close)">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </div>
    </template>
    <div style="display: flex;flex-direction: column;align-items: center">
        <el-form label-width="200"   style="max-width: 80%" :model="state.routeData" ref="formRef">

          <el-form-item label="父级路由" prop="parentId" >
            <el-descriptions  v-if="parent.id" border>
              <el-descriptions-item label="名称">{{parent.name}}</el-descriptions-item>
              <el-descriptions-item label="标题">{{parent.title}}</el-descriptions-item>
              <el-descriptions-item label="路径">{{ parent.path }}</el-descriptions-item>
            </el-descriptions>
            <span v-if="!parent.id">无</span>
          </el-form-item>

            <el-form-item label="路由名称" prop="name">
              <el-input v-model="state.routeData.name"></el-input>
            </el-form-item>
          <el-form-item label="路由标题" prop="title">
            <el-input v-model="state.routeData.title"></el-input>
          </el-form-item>
          <el-form-item label="路由描述" prop="remark">
            <el-input v-model="state.routeData.remark"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="state.routeData.path"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="state.routeData.component">
              <template #prepend>@/</template>
            </el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="state.routeData.icon"></el-input>
          </el-form-item>
          <el-form-item label="是否菜单" prop="isMenu">
            <el-radio-group v-model="state.routeData.isMenu" class="ml-4">
              <el-radio :label="1" size="large">是</el-radio>
              <el-radio :label="0" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="路由重定向地址" prop="redirect">
            <el-input v-model="state.routeData.redirect"></el-input>
          </el-form-item>
          <el-form-item label="权限编码" prop="permission.permissionCode">
            <el-input v-model="state.routeData.permission.permissionCode"></el-input>
          </el-form-item>
          <el-form-item label="权限名称" prop="permission.permissionName">
            <el-input v-model="state.routeData.permission.permissionName"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="state.routeData.sort" :min="0"/>
          </el-form-item>

          <el-form-item label="层级" prop="level">
            <el-input-number v-model="state.routeData.level" :min="1"/>
          </el-form-item>

          <el-form-item label="元数据json格式" prop="meta">
            <div style="width: 100%;display: flex;align-items: center">
              <el-input v-model="state.jsonStr"  autosize type="textarea" placeholder="Please input"/>
            </div>
            <el-button @click="formatJSON" style="margin-top: 10px;width: 100%" type="primary">格式化</el-button>
          </el-form-item>

          <el-form-item>

          </el-form-item>
        </el-form>
      <div >
          <el-button @click="onSubmit" type="primary">添加</el-button>
          <el-button type="warning">清空</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ElButton, ElDialog, ElMessage} from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import {computed, onMounted, onUnmounted, reactive, ref} from 'vue'
import {createRoute} from "@/api/backend/route/route.js";

const props=defineProps({
  onClose:{
    type:Function,
    default:()=>{}
  },
  beforeSubmit:{
    type:Function,
    default:()=>{}
  },
  routes:{
    type:Array,
    default:[]
  },
  parent:{
    type:Object,
    default:{}
  },
  isShow:{
    type:Boolean,
    default:true
  },
  onSuccess:{
    type:Function,
    default:()=>{}
  },
  onError:{
    type:Function,
    default:()=>{}
  }
})

const state=reactive({
  visible:true,
  routeData:{parentId:props.parent.id?props.parent.id:0,isMenu:0,sort:0,level:props.parent.level?props.parent.level+1:1,permission:{permissionCode:'',permissionName:''}},
  jsonStr:JSON.stringify({"hello":'world'},null,"\t")
})
const formatJSON=()=>{
   try {
     const curValue=JSON.parse(state.jsonStr)
     state.jsonStr=JSON.stringify(curValue,null,"\t")
   }catch (e){
      ElMessage({
        type:"error",
        message:"JSON格式不正确"
      })
   }

}
const beforeClose=(done)=>{
  props.onClose()
  if(done){
    done()
  }
}
const onDialogClose=(close)=>{
   beforeClose()
   close()
}

const onOpen=()=>{
}

const onSubmit=()=>{
  state.routeData.meta=state.jsonStr
  props.beforeSubmit(state.routeData)
  createRoute(state.routeData).catch(e=>{
    ElMessage({
      type:"error",
      message:e.msg
    })
  }).then(res=>{
    props.onSuccess(res)
  }).catch(error=>{
    props.onError(error)
  })
}
onMounted(()=>{
})

onUnmounted(()=>{
})
</script>

<script>
  export  default {
    name:"RouteAddForm"
  }
</script>
<style scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>